<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员控制面板 - 网络文件共享平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <style>
        :root {
            --primary: #4A76FF;
            --primary-dark: #3A66E0;
            --primary-light: #6c8cff;
            --secondary: #6A5AF9;
            --success: #1cc88a;
            --info: #36b9cc;
            --warning: #f6c23e;
            --danger: #e74a3b;
            --light: #f8f9fc;
            --dark: #212529;
            --gray: #858796;
            --light-gray: #eaecf4;
            --border: #e3e6f0;
            --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            --transition: all 0.3s ease;
            --text-color-no-dark: #212529; /* 不随深色模式改变的文本颜色 */
            
            /* 深色模式变量 */
            --dark-bg: #121826;
            --dark-card: #1e293b;
            --dark-text: #e2e8f0;
            --dark-border: #334155;
            --dark-header: #0f172a;
        }
        
        /* 不随深色模式改变颜色的文本 */
        .text-no-dark {
            color: var(--text-color-no-dark);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            transition: var(--transition);
        }
        
        body {
            background-color: #f5f7fb;
            color: #333;
            line-height: 1.6;
        }

         /* 复选框容器 */
        .form-check {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
    
        /* 复选框标签 */
        .form-check-label {
            margin-left: 10px;
            font-size: 16px;
            color: var(--dark);
            cursor: pointer;
            transition: color 0.3s;
        }
    
        /* 复选框本身 */
        .form-check-input {
            width: 20px;
            height: 20px;
            margin: 0;
            cursor: pointer;
            position: relative;
            appearance: none;
            border: 2px solid var(--border);
            border-radius: 4px;
            transition: all 0.3s;
            flex-shrink: 0;
        }
    
        /* 复选框选中状态 */
        .form-check-input:checked {
            background-color: var(--primary);
            border-color: var(--primary);
        }

        /* 深色模式样式 */
        body.dark-mode {
            background-color: var(--dark-bg);
            color: var(--dark-text);
        }
        
        body.dark-mode .admin-header {
            background: linear-gradient(135deg, #2a3a8d, #1a1a5e);
        }
        
        body.dark-mode .folder-info {
            background: #1e293b;
            color: #cbd5e1;
            border-bottom: 1px solid var(--dark-border);
        }
        
        body.dark-mode .admin-nav {
            background: var(--dark-header);
            border-bottom: 1px solid var(--dark-border);
        }
        
        body.dark-mode .admin-nav a {
            color: var(--dark-text);
        }
        
        body.dark-mode .admin-nav a:hover {
            color: var(--primary-light);
        }
        
        body.dark-mode .admin-nav a.active {
            color: var(--primary-light);
            border-bottom: 3px solid var(--primary-light);
        }
        
        body.dark-mode .dashboard-card {
            background: var(--dark-card);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        body.dark-mode .dashboard-card h2 {
            color: var(--primary-light);
            border-bottom: 1px solid var(--dark-border);
        }
        
        body.dark-mode .space-meter {
            background: #334155;
        }
        
        body.dark-mode .stat-item {
            background: #1e293b;
        }
        
        body.dark-mode .form-group label {
            color: var(--dark-text);
        }
        
        body.dark-mode .form-group input, 
        body.dark-mode .form-group select {
            background-color: #1e293b;
            color: var(--dark-text);
            border: 1px solid var(--dark-border);
        }
        
        body.dark-mode .file-list {
            border: 1px solid var(--dark-border);
        }
        
        body.dark-mode .file-item {
            border-bottom: 1px solid var(--dark-border);
        }
        
        body.dark-mode .file-name a {
            color: var(--primary-light);
        }
        
        body.dark-mode .file-name a:hover {
            color: #8da2fb;
        }
        
        body.dark-mode .flash-success {
            background-color: #14532d;
            color: #bbf7d0;
            border: 1px solid #15803d;
        }
        
        body.dark-mode .flash-error {
            background-color: #7f1d1d;
            color: #fecaca;
            border: 1px solid #b91c1c;
        }
        
        body.dark-mode .info-card {
            background: var(--dark-card);
        }
        
        body.dark-mode .info-card h3 {
            color: #94a3b8;
        }
        
        body.dark-mode .info-value {
            color: var(--dark-text);
        }
        
        /* 深色模式下的复选框标签 */
        body.dark-mode .form-check-label {
            color: var(--dark-text);
        }
    
        /* 深色模式下的复选框 */
        body.dark-mode .form-check-input {
            border-color: var(--dark-border);
        }
    
        body.dark-mode .form-check-input:checked {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
        }
        
        /* 悬停效果 */
        .form-check-input:hover {
            box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1);
        }
        
        /* 禁用状态 */
        .form-check-input:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* 尺寸限制 */
        .form-check-input.small {
            width: 16px;
            height: 16px;
        }

        .form-check-input.small:checked::after {
            top: 1px;
            left: 5px;
            width: 4px;
            height: 8px;
        }

        .form-check-input.large {
            width: 24px;
            height: 24px;
        }

        .form-check-input.large:checked::after {
            top: 3px;
            left: 7px;
            width: 6px;
            height: 12px;
        }

        /* 开关控件样式 */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked + .toggle-slider {
            background-color: var(--primary);
        }

        input:checked + .toggle-slider:before {
            transform: translateX(26px);
        }

        /* 深色模式下的开关控件 */
        body.dark-mode .toggle-slider {
            background-color: #444;
        }

        body.dark-mode input:checked + .toggle-slider {
            background-color: var(--primary-light);
        }

        /* 左下角深色模式切换控件 */
        .bottom-left-controls {
            position: fixed;
            bottom: 20px;
            left: 270px; /* 与侧边栏宽度对齐 */
            z-index: 1000;
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .theme-toggle-bottom {
            background: white;
            color: var(--dark);
            border: 1px solid var(--border);
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .theme-toggle-bottom:hover {
            background: var(--light);
        }

        body.dark-mode .theme-toggle-bottom {
            background: var(--dark-card);
            color: var(--dark-text);
            border-color: var(--dark-border);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        body.dark-mode .theme-toggle-bottom:hover {
            background: #334155;
        }

        /* 头部样式 */
        .admin-header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .admin-header h1 {
            font-size: 20px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0;
        }
        
        .admin-header i {
            font-size: 24px;
        }
        
        .header-controls {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .logout-btn {
            background: rgba(255,255,255,0.2);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .logout-btn:hover {
            background: rgba(255,255,255,0.3);
        }
        
        .theme-toggle {
            background: rgba(255,255,255,0.2);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .theme-toggle:hover {
            background: rgba(255,255,255,0.3);
        }
        
        /* 文件夹信息 */
        .folder-info {
            background: #f0f5ff;
            padding: 12px 20px;
            display: flex;
            align-items: center;
            font-size: 14px;
            border-bottom: 1px solid #e0e0e0;
            color: #444;
        }
        
        .folder-info i {
            margin-right: 10px;
            color: var(--primary);
        }
        
        /* 侧边栏样式 */
        .sidebar {
            width: 250px;
            background: white;
            border-right: 1px solid var(--border);
            height: calc(100vh - 120px);
            overflow-y: auto;
            position: fixed;
            top: 120px;
            left: 0;
            z-index: 998;
            transition: var(--transition);
        }
        
        .sidebar ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .sidebar a {
            color: var(--dark);
            text-decoration: none;
            font-weight: 500;
            padding: 15px 20px;
            display: block;
            transition: all 0.3s;
            border-left: 3px solid transparent;
        }
        
        .sidebar a:hover {
            color: var(--primary);
            background-color: rgba(74, 118, 255, 0.05);
        }
        
        .sidebar a.active {
            color: var(--primary);
            background-color: rgba(74, 118, 255, 0.1);
            border-left: 3px solid var(--primary);
        }
        
        .sidebar a i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        
        /* 深色模式下的侧边栏 */
        body.dark-mode .sidebar {
            background: var(--dark-header);
            border-right-color: var(--dark-border);
        }
        
        body.dark-mode .sidebar a {
            color: var(--dark-text);
        }
        
        body.dark-mode .sidebar a:hover {
            color: var(--primary-light);
            background-color: rgba(74, 118, 255, 0.1);
        }
        
        body.dark-mode .sidebar a.active {
            color: var(--primary-light);
            background-color: rgba(74, 118, 255, 0.2);
            border-left-color: var(--primary-light);
        }
        
        /* 主容器 */
        .main-content {
            margin-left: 270px;
            padding: 10px;
            min-height: calc(100vh - 120px);
            transition: var(--transition);
        }
        
        .content-wrapper {
            max-width: 1200px;
            width: 100%;
        }
        
        /* 卡片网格布局 */
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .dashboard-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            border: 1px solid rgba(0,0,0,0.05);
        }
        
        .dashboard-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .dashboard-card h2 {
            font-size: 18px;
            margin-bottom: 20px;
            color: var(--primary);
            border-bottom: 1px solid var(--border);
            padding-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        /* 空间仪表 */
        .space-meter {
            height: 12px;
            background: #f0f0f0;
            border-radius: 10px;
            margin: 15px 0;
            overflow: hidden;
        }
        
        .space-fill {
            height: 100%;
            background: var(--primary);
            border-radius: 10px;
            transition: width 0.5s ease;
        }
        
        .space-info {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            color: var(--gray);
            margin-top: 5px;
        }
        
        /* 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .stat-item {
            text-align: center;
            padding: 15px;
            background: var(--light);
            border-radius: 8px;
            transition: var(--transition);
        }
        
        .stat-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary);
            margin: 5px 0;
        }
        
        .stat-label {
            font-size: 13px;
            color: var(--gray);
        }
        
        /* 配置表单 */
        .config-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark);
            font-size: 14px;
        }
        
        .form-group input, .form-group select {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        
        .form-group input:focus, .form-group select:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(74, 118, 255, 0.2);
        }
        
        .form-full {
            grid-column: 1 / -1;
        }
        
        .btn-save {
            background: var(--primary);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.3s;
            font-size: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-save:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
        }
        
        .password-form {
            max-width: 500px;
            margin: 0 auto;
        }
        
        /* 文件列表 */
        .file-list {
            max-height: 500px;
            overflow-y: auto;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 15px;
        }
        
        .file-item {
            display: flex;
            justify-content: space-between;
            padding: 15px;
            border-bottom: 1px solid var(--border);
            align-items: center;
            border-radius: 6px;
            transition: var(--transition);
        }
        
        .file-item:hover {
            background-color: rgba(74, 118, 255, 0.05);
        }
        
        .file-item:last-child {
            border-bottom: none;
        }
        
        .file-name {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 15px;
        }
        
        .file-name a {
            color: var(--primary);
            text-decoration: none;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .file-name a:hover {
            color: var(--primary-dark);
        }
        
        .file-size {
            width: 100px;
            text-align: right;
            color: var(--gray);
            font-size: 14px;
        }
        
        /* 消息提示 */
        .flash-messages {
            margin-bottom: 20px;
        }
        
        .flash-message {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .flash-success {
            background-color: #e8f5e9;
            color: #2e7d32;
            border: 1px solid #c8e6c9;
        }
        
        .flash-error {
            background-color: #ffebee;
            color: #c62828;
            border: 1px solid #ffcdd2;
        }
        
        /* 文件操作 */
        .file-actions {
            width: 40px;
            display: flex;
            justify-content: flex-end;
        }

        .delete-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--gray);
            transition: color 0.2s;
            padding: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            border-radius: 50%;
            width: 32px;
            height: 32px;
        }

        .delete-btn:hover {
            color: var(--danger);
            background: rgba(231, 29, 54, 0.1);
        }
        
        /* 标签页内容 */
        .section-content {
            display: none;
            animation: fadeIn 0.4s ease-in-out;
        }
        
        .section-content.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 系统信息卡片 */
        .system-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .info-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
        }
        
        .info-card:hover {
            transform: translateY(-3px);
        }
        
        .info-card h3 {
            font-size: 15px;
            color: var(--gray);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .info-value {
            font-size: 20px;
            font-weight: 600;
            color: var(--dark);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .config-form {
                grid-template-columns: 1fr;
            }
            
            .sidebar {
                width: 200px;
            }
            
            .main-content {
                margin-left: 220px;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .btn-save {
                width: 100%;
                justify-content: center;
            }
            
            .admin-header {
                -ms-flex-direction: column;
                flex-direction: column;
                gap: 15px;
                padding: 15px;
            }
            
            .header-controls {
                width: 100%;
                justify-content: space-between;
            }
        }
        
        @media (max-width: 480px) {
            .admin-header h1 {
                font-size: 16px;
            }
            
            .sidebar {
                width: 100%;
                height: auto;
                position: relative;
                top: 0;
                margin-top: 10px;
            }
            
            .sidebar ul {
                display: flex;
                overflow-x: auto;
                white-space: nowrap;
            }
            
            .sidebar a {
                padding: 10px 15px;
                border-left: none;
                border-bottom: 3px solid transparent;
            }
            
            .sidebar a.active {
                border-left: none;
                border-bottom: 3px solid var(--primary);
                background-color: transparent;
            }
            
            .main-content {
                margin-left: 0;
                margin-top: 20px;
                padding: 15px;
            }
            
            .file-item {
                -ms-flex-direction: column;
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .file-size {
                text-align: left;
                width: auto;
            }
        }

        /* 外观设置样式 */
        .appearance-preview {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-align: center;
            align-items: center;
            margin: 20px 0;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
        }
        
        .favicon-preview {
            width: 64px;
            height: 64px;
            margin: 10px 0;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .favicon-preview img {
            max-width: 48px;
            max-height: 48px;
        }
        
        /* 进度条颜色 */
        .progress-bar {
            transition: width 0.6s ease;
        }
        
        .progress-bar.low {
            background-color: var(--success);
        }
        
        .progress-bar.medium {
            background-color: var(--warning);
        }
        
        .progress-bar.high {
            background-color: var(--danger);
        }
    </style>
</head>
<body>

    <header class="admin-header">
        <h1><i class="bi bi-cogs"></i> 网络文件共享平台 - 管理员控制面板</h1>
        <div class="header-controls">
            <button class="logout-btn" onclick="location.href='/error_management'">
                <i class="bi bi-exclamation-triangle btn-sm"></i> 错误页面管理
            </button>
            <button class="logout-btn" onclick="location.href='/admin/github_clone'">
                <i class="bi bi-github btn-sm"></i> GitHub克隆下载
            </button>
            <button class="logout-btn" onclick="location.href='{{ url_for('admin_logout') }}'">
                <i class="bi bi-box-arrow-right btn-sm"></i> 退出
            </button>
        </div>
    </header>
    
    <div class="folder-info">
        <i class="bi bi-folder"></i>
        当前共享目录: {{ share_folder }}
    </div>
    
    <div class="layout-wrapper">
        <nav class="sidebar">
            <ul>
                <li><a href="#dashboard" class="nav-link active" data-section="dashboard"><i class="bi bi-speedometer2"></i> <span>仪表盘</span></a></li>
                <li><a href="#space" class="nav-link" data-section="space"><i class="bi bi-hdd"></i> <span>空间管理</span></a></li>
                <li><a href="#security" class="nav-link" data-section="security"><i class="bi bi-shield-lock"></i> <span>安全设置</span></a></li>
                <li><a href="#network" class="nav-link" data-section="network"><i class="bi bi-wifi"></i> <span>网络配置</span></a></li>
                <li><a href="#files" class="nav-link" data-section="files"><i class="bi bi-files"></i> <span>文件管理</span></a></li>

                <li><a href="#update" class="nav-link" data-section="update"><i class="bi bi-arrow-down-circle"></i> <span>系统更新</span></a></li>
            </ul>
        </nav>
        
        <main class="main-content">
            <div class="content-wrapper">
        <div class="flash-messages">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="flash-message flash-{{ category }}">
                            <i class="bi bi-{% if category == 'success' %}check-circle{% else %}exclamation-circle{% endif %}"></i>
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
        </div>
        
        <!-- 仪表盘部分 -->
        <section id="dashboard" class="section-content active">
            <div class="dashboard-grid">
                <div class="dashboard-card" style="grid-column: span 3; background-color: var(--secondary-bg);">
                    <h2><i class="bi bi-gear"></i> 系统管理</h2>
                    <div style="display: flex; gap: 15px; margin-top: 15px;">
                        <button id="update-config-btn" class="btn btn-primary">
                            <i class="bi bi-arrow-clockwise"></i> 自动更新配置文件
                        </button>
                        <button id="view-system-log-btn" class="btn btn-info">
                            <i class="bi bi-file-text"></i> 查看系统日志
                        </button>
                    </div>
                </div>
                <div class="dashboard-card">
                    <h2><i class="bi bi-hdd"></i> 存储空间</h2>
                    <div class="space-meter">
                        <div class="space-fill" style="width: {{ disk_space.percent }}%"></div>
                    </div>
                    <div class="space-info">
                        <span>已用: {{ (disk_space.used / (1024 ** 3)) | round(2) }} GB</span>
                        <span>可用: {{ (disk_space.free / (1024 ** 3)) | round(2) }} GB</span>
                    </div>
                    <div class="space-info">
                        <span>总计: {{ (disk_space.total / (1024 ** 3)) | round(2) }} GB</span>
                        <span>使用率: {{ disk_space.percent | round(1) }}%</span>
                    </div>
                </div>
                
                <div class="dashboard-card">
                    <h2><i class="bi bi-cpu"></i> 系统资源</h2>
                    <div class="stats-grid">
                        <div class="stat-item">
                            <div class="stat-value">{{ cpu_percent }}%</div>
                            <div class="stat-label">CPU使用率</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">{{ mem_percent }}%</div>
                            <div class="stat-label">内存使用率</div>
                            <div class="stat-value">{{ mem_used }} / {{ mem_total }}</div>
                        </div>
                    </div>
                </div>
                
                <div class="dashboard-card">
                    <h2><i class="bi bi-wifi"></i> 网络接口</h2>
                    <ul>
                        {% for iface in interfaces %}
                        <li style="margin-bottom: 10px; display: flex; gap: 10px;">
                            <span style="font-weight: 500;">{{ iface['interface'] }}:</span>
                            <span>{{ iface['ip'] }}</span>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            
            <div class="system-info">
                <div class="info-card">
                    <h3><i class="bi bi-file-earmark"></i> 文件数量</h3>
                    <div class="info-value">{{ files|length }}</div>
                </div>
                
                <div class="info-card">
                    <h3><i class="bi bi-download"></i> 总下载次数</h3>
                    <div class="info-value">{{ total_downloads }}</div>
                </div>
                
                <div class="info-card">
                    <h3><i class="bi bi-clock"></i> 服务运行时间</h3>
                    <div class="info-value">{{ uptime }}</div>
                </div>
                
                <div class="info-card">
                    <h3><i class="bi bi-calendar"></i> 启动时间</h3>
                    <div class="info-value">{{ service_start }}</div>
                </div>
            </div>
        </section>
        

        
        <!-- 空间管理部分 -->
        <section id="space" class="section-content">
            <div class="dashboard-card">
                <h2><i class="bi bi-sliders"></i> 存储空间配置</h2>
                <div class="space-meter" style="margin-top: 15px;">
                    <div class="space-fill" style="width: {{ disk_space.percent }}%"></div>
                </div>
                <div class="space-info" style="margin-top: 5px;">
                    <span>已用: {{ (disk_space.used / (1024 ** 3)) | round(2) }} GB / {{ (disk_space.total / (1024 ** 3)) | round(2) }} GB</span>
                    <span>使用率: {{ disk_space.percent | round(1) }}%</span>
                </div>
                
                <form method="POST" action="{{ url_for('update_config') }}" id="storage-config-form">
                    <div class="config-form">
                        <div class="form-group">
                            <label for="max_storage">最大存储空间 (GB)</label>
                            <input type="number" id="max_storage" name="max_storage" 
                                   value="{{ (max_total_size / 1024) | round(2) }}"
                                   min="0.5" step="0.1">
                        </div>
                        
                        <div class="form-group">
                            <label for="max_file_size">最大文件大小 (MB)</label>
                            <input type="number" id="max_file_size" name="max_file_size" 
                                   value="{{ max_file_size }}" min="1">
                        </div>
                        
                        <div class="form-group form-full">
                            <button type="submit" class="btn-save">
                                <i class="bi bi-save"></i> 保存设置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        
        <!-- 安全设置部分 -->
        <section id="security" class="section-content">
            <div class="dashboard-card">
                <h2><i class="bi bi-shield-lock"></i> 安全设置</h2>
                
                <!-- 极验验证设置 -->
                <div class="security-section">
                    <h3 style="margin-top: 20px; margin-bottom: 15px; font-size: 1.2rem;"><i class="bi bi-shield"></i> 极验验证配置</h3>
                    <form id="captchaForm" class="config-form">
                        <div class="form-group">
                            <label for="geetestId">极验ID</label>
                            <input type="text" class="form-control form-full" id="geetestId" name="geetest_id" 
                                   value="{{ system_config.geetest_id or '' }}" placeholder="请输入极验ID">
                        </div>
                        
                        <div class="form-group">
                            <label for="geetestKey">极验密钥</label>
                            <input type="password" class="form-control form-full" id="geetestKey" name="geetest_key" 
                                   value="{{ system_config.geetest_key or '' }}" placeholder="请输入极验密钥">
                        </div>
                        
                        <div class="form-group" style="display: flex; align-items: center; justify-content: space-between;">
                            <label for="offlineDownloadEnabled">启用离线下载功能</label>
                            <label class="toggle-switch">
                                <input type="checkbox" id="offlineDownloadEnabled" name="offline_download_enabled"
                                       {% if system_config.offline_download_enabled %}checked{% endif %}>
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn-save">
                                <i class="bi bi-save"></i> 保存极验设置
                            </button>
                        </div>
                    </form>
                </div>
                
                <!-- 更改密码表单 -->
                <div class="security-section" style="margin-top: 30px; padding-top: 30px; border-top: 1px solid #e0e0e0;">
                    <h3 style="margin-bottom: 15px; font-size: 1.2rem;"><i class="bi bi-key"></i> 密码设置</h3>
                    <form method="POST" action="{{ url_for('admin_change_password') }}" class="password-form">
                        <div class="form-group">
                            <label for="current_password">当前密码</label>
                            <input type="password" id="current_password" name="current_password" required class="form-control">
                        </div>
                    
                        <div class="form-group">
                            <label for="new_password">新密码</label>
                            <input type="password" id="new_password" name="new_password" required class="form-control">
                        </div>
                    
                        <div class="form-group">
                            <label for="confirm_password">确认新密码</label>
                            <input type="password" id="confirm_password" name="confirm_password" required class="form-control">
                        </div>
                    
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-key"></i> 更改密码
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
        
        <!-- 网络配置部分 -->
        <section id="network" class="section-content">
            <div class="dashboard-card">
                <h2><i class="bi bi-wifi"></i> 网络配置(修改后需要重启服务)</h2>
                <form method="POST" action="{{ url_for('update_config') }}" id="network-config-form">
                    <div class="config-form">
                        <div class="form-group">
                            <label for="port">服务端口</label>
                            <input type="number" id="port" name="port" 
                                   value="{{ port }}" min="1024" max="65535">
                        </div>
                        
                        <div class="form-group">
                            <label for="network_interface">网络接口</label>
                            <select id="network_interface" name="network_interface">
                                <option value="auto" {% if config.network_interface == 'auto' %}selected{% endif %}>自动选择</option>
                                {% for iface in interfaces %}
                                <option value="{{ iface['interface'] }}" {% if config.network_interface == iface['interface'] %}selected{% endif %}>
                                    {{ iface['interface'] }} ({{ iface['ip'] }})
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="language">界面语言</label>
                            <select id="language" name="language">
                                <option value="zh" {% if config.language == 'zh' %}selected{% endif %}>中文</option>
                            </select>
                        </div>
                        
                        <div class="form-group form-full">
                            <button type="submit" class="btn-save">
                                <i class="bi bi-save"></i> 保存设置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        
        <!-- 文件管理部分 -->
        <section id="files" class="section-content">
            <div class="dashboard-card">
                <h2><i class="bi bi-files"></i> 共享文件列表</h2>
                <div class="file-list">
                    {% for file in files %}
                    <div class="file-item">
                        <div class="file-name">
                            <a href="{{ url_for('download', filename=file.name) }}" title="点击下载">
                                <i class="bi bi-file-earmark"></i> {{ file.name }}
                            </a>
                        </div>
                        <div>
                            <a href="/file_detail?file={{ file.filename }}">查看详情</a>
                        </div>
                        <div class="file-size">
                            {% if file.size >= 1048576 %}
                                {{ (file.size / 1048576)|round(2) }} MB
                            {% elif file.size >= 1024 %}
                                {{ (file.size / 1024)|round(2) }} KB
                            {% else %}
                                {{ file.size }} bytes
                            {% endif %}
                        </div>
                        <div class="file-actions">
                            <form method="POST" action="{{ url_for('api_delete_file') }}" onsubmit="return false;">
                                <input type="hidden" name="filename" value="{{ file.name }}">
                                <button type="submit" class="delete-btn" title="删除文件">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                    {% else %}
                    <div style="padding: 30px; text-align: center; color: var(--gray);">
                        <i class="bi bi-folder" style="font-size: 48px;"></i>
                        <p style="margin-top: 15px;">共享目录中没有文件</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>
        
        <!-- 系统更新部分 -->
        <section id="update" class="section-content">
            <div class="dashboard-card">
                <h2><i class="bi bi-arrow-down-circle"></i> 系统更新</h2>
                <p style="margin-bottom: 20px; color: var(--gray);">检查并应用系统更新，保持平台最新状态</p>
                
                <!-- 当前版本信息 -->
                <div style="margin-bottom: 30px; padding: 20px; background-color: var(--secondary-bg); border-radius: 8px;">
                    <h3 style="margin-bottom: 15px;"><i class="bi bi-info-circle"></i> 当前版本信息</h3>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                        <div>
                            <strong>系统版本:</strong><br>
                            <span id="current-version">v1.0.0</span>
                        </div>
                        <div>
                            <strong>更新状态:</strong><br>
                            <span id="update-status">检查中...</span>
                        </div>
                        <div>
                            <strong>最后检查:</strong><br>
                            <span id="last-check">未检查</span>
                        </div>
                    </div>
                </div>
                
                <!-- 更新操作按钮 -->
                <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 30px;">
                    <button id="check-update-btn" class="btn btn-primary">
                        <i class="bi bi-search"></i> 检查更新
                    </button>
                    <button id="download-update-btn" class="btn btn-success" style="display: none;">
                        <i class="bi bi-download"></i> 下载更新
                    </button>
                    <button id="apply-update-btn" class="btn btn-warning" style="display: none;">
                        <i class="bi bi-check-circle"></i> 应用更新
                    </button>
                    <button id="restart-server-btn" class="btn btn-info" style="display: none;">
                        <i class="bi bi-arrow-clockwise"></i> 重启服务
                    </button>
                </div>
                
                <!-- 更新进度显示 -->
                <div id="update-progress" style="display: none; margin-bottom: 20px;">
                    <div style="margin-bottom: 10px;">
                        <strong>更新进度:</strong> <span id="progress-text">0%</span>
                    </div>
                    <div style="width: 100%; background-color: #e9ecef; border-radius: 4px; overflow: hidden;">
                        <div id="progress-bar" style="width: 0%; height: 20px; background-color: var(--primary); transition: width 0.3s;"></div>
                    </div>
                </div>
                
                <!-- 更新日志 -->
                <div id="update-log" style="background-color: var(--secondary-bg); border: 1px solid var(--border); border-radius: 6px; padding: 15px; max-height: 300px; overflow-y: auto; font-family: monospace; font-size: 13px;">
                    <p style="color: var(--gray); margin: 0;">等待操作开始...</p>
                </div>
                
                <!-- 更新说明 -->
                <div style="margin-top: 30px; padding: 20px; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px;">
                    <h4 style="margin-top: 0;"><i class="bi bi-exclamation-triangle"></i> 更新说明</h4>
                    <ul style="margin-bottom: 0;">
                        <li>系统会在更新期间显示维护页面</li>
                        <li>更新前建议先备份重要数据</li>
                        <li>确保有稳定的网络连接</li>
                        <li>更新完成后服务会自动重启</li>
                    </ul>
                </div>
            </div>
        </section>
</div>
    </div>
    
    <!-- 左下角深色模式切换控件 -->
    <div class="bottom-left-controls">
        <button id="theme-toggle" class="theme-toggle-bottom">
            <i class="bi bi-moon btn-sm"></i> 深色模式
        </button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 默认显示仪表盘
            document.querySelector('.section-content.active').style.display = 'block';
            
            // 标签页切换功能
            const navLinks = document.querySelectorAll('.nav-link');
            
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有活动状态
                    navLinks.forEach(l => l.classList.remove('active'));
                    document.querySelectorAll('.section-content').forEach(section => {
                        section.classList.remove('active');
                        section.style.display = 'none';
                    });;
                    
                    // 设置当前活动状态
                    this.classList.add('active');
                    const targetSection = this.getAttribute('data-section');
                    const sectionElement = document.getElementById(targetSection);
                    
                    if (sectionElement) {
                        sectionElement.classList.add('active');
                        sectionElement.style.display = 'block';
                    }
                });
            });
            
            // 处理URL哈希值
            const hash = window.location.hash.substring(1);
            if (hash) {
                const targetLink = document.querySelector(`.nav-link[data-section="${hash}"]`);
                if (targetLink) {
                    targetLink.click();
                }
            }
            
            // 修复415错误：设置正确的Content-Type
            document.getElementById('storage-config-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const formData = new FormData(this);
                const data = Object.fromEntries(formData.entries());
                
                fetch(this.action, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(result => {
                    if (result.status === 'success') {
                                location.reload();
                            } else {
                                showMessage(`错误: ${result.message}`, 'error');
                            }
                })
                .catch(error => {
                    console.error('配置更新失败:', error);
                    showMessage('配置更新失败，请重试', 'error');
                });
            });
            
            // 修复415错误：设置正确的Content-Type
            document.getElementById('network-config-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const formData = new FormData(this);
                const data = Object.fromEntries(formData.entries());
                
                fetch(this.action, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(result => {
                    if (result.status === 'success') {
                        location.reload();
                    } else {
                        showMessage(`错误: ${result.message}`, 'error');
                    }
                })
                .catch(error => {
                    console.error('配置更新失败:', error);
                    showMessage('配置更新失败，请重试', 'error');
                });
            });
            
            // 极验设置表单提交
            document.getElementById('captchaForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const formData = new FormData(this);
                const data = Object.fromEntries(formData);
                
                // 发送请求
                fetch('/api/update_config', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        showMessage('极验设置已保存', 'success');
                    } else {
                        showMessage('保存失败: ' + data.message, 'error');
                    }
                })
                .catch(error => {
                    showMessage('保存失败: ' + error.message, 'error');
                });
            });
            
            // 系统更新功能
            const checkUpdateBtn = document.getElementById('check-update-btn');
            const startUpdateBtn = document.getElementById('start-update-btn');
            const currentVersionSpan = document.getElementById('current-version');
            const updateStatusSpan = document.getElementById('update-status');
            const lastCheckSpan = document.getElementById('last-check');
            const progressBar = document.getElementById('progress-bar');
            const progressText = document.getElementById('progress-text');
            const updateLog = document.getElementById('update-log');
            const updateProgress = document.getElementById('update-progress');
            
            // 页面加载时获取当前版本信息
            const timestamp = Date.now();
            fetch(`/api/system/config?t=${timestamp}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('版本信息响应:', data); // 调试日志
                    // 适配实际的API响应格式：直接返回配置数据
                    if (data && data.app_version) {
                        const currentVersion = data.app_version;
                        currentVersionSpan.textContent = 'v' + currentVersion;
                        console.log('设置版本显示:', 'v' + currentVersion);
                    } else {
                        throw new Error('版本信息格式错误');
                    }
                })
                .catch(error => {
                    console.error('获取版本信息失败:', error);
                    currentVersionSpan.textContent = 'v1.9'; // 备用版本号
                });
            // 检查更新
            if (checkUpdateBtn) {
                checkUpdateBtn.addEventListener('click', function() {
                    this.disabled = true;
                    this.innerHTML = '<i class="bi bi-hourglass-split"></i> 检查中...';
                    updateLog.innerHTML = '<p style="color: var(--primary);">正在检查更新...</p>';
                    updateStatusSpan.textContent = '检查中...';
                    lastCheckSpan.textContent = new Date().toLocaleString();
                    
                    fetch('/api/check_update', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Admin-Token': localStorage.getItem('admin_token')
                        }
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log('检查更新响应:', data); // 调试日志
                        
                        // 添加安全检查，防止空值错误
                        if (!data) {
                            throw new Error('响应数据为空');
                        }
                        
                        // 根据新的API响应格式处理
                        if (data.status === 'update_available') {
                            updateStatusSpan.textContent = '发现新版本';
                            updateLog.innerHTML = `
                                <p style="color: var(--warning);">发现新版本: ${data.latest_version}</p>
                                <p style="color: var(--gray);">当前版本: v${data.current_version || '1.9'}</p>
                                <p style="color: var(--gray);">${data.message}</p>
                                <div style="margin-top: 10px;">
                                    <strong>更新内容:</strong><br>
                                    ${data.changelog || '无更新说明'}
                                </div>
                            `;
                            if (startUpdateBtn) {
                                startUpdateBtn.style.display = 'inline-block';
                                startUpdateBtn.disabled = false;
                            }
                        } else if (data.status === 'latest_version') {
                            updateStatusSpan.textContent = '已是最新版本';
                            updateLog.innerHTML = '<p style="color: var(--success);">当前已是最新版本</p>';
                            if (startUpdateBtn) {
                                startUpdateBtn.style.display = 'none';
                            }
                        } else if (data.status === 'no_update') {
                            updateStatusSpan.textContent = '当前已是最新版本';
                            updateLog.innerHTML = `
                                <p style="color: var(--success);">${data.message || '当前已是最新版本'}</p>
                                <p style="color: var(--gray);">当前版本: v${data.current_version || '1.9'}</p>
                            `;
                            if (startUpdateBtn) {
                                startUpdateBtn.style.display = 'none';
                            }
                        } else if (data.status === 'development_version') {
                            updateStatusSpan.textContent = '开发版';
                            const latestInfo = data.latest_version ? `（最新官方版本：v${data.latest_version}）` : '';
                            const releaseNotes = data.release_notes || data.changelog || '当前版本高于官方版本（开发版）';
                            updateLog.innerHTML = `
                                <p style="color: var(--info);">当前版本高于官方版本 ${latestInfo}</p>
                                <div style="margin-top: 10px;">
                                    <strong>官方最新版本更新内容:</strong><br>
                                    <div style="margin-top: 5px; padding: 10px; background-color: var(--secondary-bg); border-radius: 6px; max-height: 200px; overflow-y: auto;">
                                        ${releaseNotes.replace(/\r\n/g, '<br>')}
                                    </div>
                                </div>
                            `;
                            if (startUpdateBtn) {
                                startUpdateBtn.style.display = 'none';
                            }
                        } else if (data.status === 'check_failed') {
                            updateStatusSpan.textContent = '检查失败';
                            updateLog.innerHTML = `<p style="color: var(--error);">${data.message}</p>`;
                            if (startUpdateBtn) {
                                startUpdateBtn.style.display = 'none';
                            }
                        } else {
                            updateStatusSpan.textContent = '检查失败';
                            updateLog.innerHTML = `<p style="color: var(--error);">检查失败: ${data.message || '未知错误'}</p>`;
                            if (startUpdateBtn) {
                                startUpdateBtn.style.display = 'none';
                            }
                        }
                    })
                    .catch(error => {
                        console.error('网络错误:', error); // 调试日志
                        updateStatusSpan.textContent = '网络错误';
                        updateLog.innerHTML = `<p style="color: var(--error);">网络错误: ${error.message}</p>`;
                        if (startUpdateBtn) {
                            startUpdateBtn.style.display = 'none';
                        }
                    })
                    .finally(() => {
                        this.disabled = false;
                        this.innerHTML = '<i class="bi bi-arrow-clockwise"></i> 检查更新';
                    });
                });
            }
            
            // 开始更新
            if (startUpdateBtn) {
                startUpdateBtn.addEventListener('click', function() {
                    if (!confirm('确定要开始更新吗？更新过程可能需要几分钟时间。')) {
                        return;
                    }
                    
                    this.disabled = true;
                    this.innerHTML = '<i class="bi bi-hourglass-split"></i> 更新中...';
                    if (checkUpdateBtn) {
                        checkUpdateBtn.disabled = true;
                    }
                    
                    progressBar.style.width = '0%';
                    progressText.textContent = '0%';
                    updateLog.innerHTML = '<p style="color: var(--primary);">开始更新...</p>';
                    
                    // 开始更新请求
                    fetch('/api/start_update', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Admin-Token': localStorage.getItem('admin_token')
                        }
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log('开始更新响应:', data); // 调试日志
                        
                        // 添加安全检查，防止空值错误
                        if (!data) {
                            throw new Error('响应数据为空');
                        }
                        if (data.status === 'success') {
                            updateLog.innerHTML = '<p style="color: var(--success);">更新完成！服务将在几秒后重启</p>';
                            showMessage('更新完成，正在重启服务...', 'success');
                            
                            // 5秒后刷新页面
                            setTimeout(() => {
                                location.reload();
                            }, 5000);
                        } else {
                            updateLog.innerHTML = `<p style="color: var(--error);">更新失败: ${data.message}</p>`;
                            showMessage(`更新失败: ${data.message}`, 'error');
                            
                            // 恢复按钮状态
                            this.disabled = false;
                            this.innerHTML = '<i class="bi bi-arrow-down-circle"></i> 开始更新';
                            if (checkUpdateBtn) {
                                checkUpdateBtn.disabled = false;
                            }
                        }
                    })
                    .catch(error => {
                        updateLog.innerHTML = `<p style="color: var(--error);">网络错误: ${error.message}</p>`;
                        showMessage(`网络错误: ${error.message}`, 'error');
                        
                        // 恢复按钮状态
                        this.disabled = false;
                        this.innerHTML = '<i class="bi bi-arrow-down-circle"></i> 开始更新';
                        if (checkUpdateBtn) {
                            checkUpdateBtn.disabled = false;
                        }
                    });
                    
                    // 模拟进度更新（实际项目中应该通过WebSocket或轮询获取真实进度）
                    let progress = 0;
                    const progressInterval = setInterval(() => {
                        progress += Math.random() * 15;
                        if (progress > 90) {
                            clearInterval(progressInterval);
                            return;
                        }
                        
                        progressBar.style.width = progress + '%';
                        progressText.textContent = Math.round(progress) + '%';
                        
                        // 添加进度日志
                        const logMessages = [
                            '正在下载更新包...',
                            '正在验证文件完整性...',
                            '正在备份当前版本...',
                            '正在应用更新...',
                            '正在重启服务...'
                        ];
                        
                        const messageIndex = Math.floor(progress / 20);
                        if (messageIndex < logMessages.length) {
                            updateLog.innerHTML += `<p style="color: var(--primary);">${logMessages[messageIndex]}</p>`;
                            updateLog.scrollTop = updateLog.scrollHeight;
                        }
                    }, 1000);
                });
            }
            
            // 显示消息
            function showMessage(message, type) {
                // 检查是否已存在消息容器
                let flashContainer = document.getElementById('flashMessages');
                if (!flashContainer) {
                    flashContainer = document.createElement('div');
                    flashContainer.className = 'flash-messages';
                    flashContainer.id = 'flashMessages';
                    flashContainer.style.position = 'fixed';
                    flashContainer.style.top = '80px';
                    flashContainer.style.right = '20px';
                    flashContainer.style.zIndex = '2000';
                    flashContainer.style.maxWidth = '400px';
                    document.body.appendChild(flashContainer);
                }
                
                const messageElement = document.createElement('div');
                messageElement.className = `flash-message flash-${type}`;
                messageElement.style.padding = '15px 20px';
                messageElement.style.borderRadius = '6px';
                messageElement.style.marginBottom = '10px';
                messageElement.style.display = 'flex';
                messageElement.style.alignItems = 'center';
                messageElement.style.gap = '10px';
                messageElement.style.animation = 'slideIn 0.3s ease-out';
                
                // 检查是否为深色模式
                const isDarkMode = document.body.classList.contains('dark-mode');
                
                if (isDarkMode) {
                    // 深色模式下的样式
                    if (type === 'success') {
                        messageElement.style.backgroundColor = '#0f5132';
                        messageElement.style.color = '#d4edda';
                        messageElement.style.border = '1px solid #198754';
                    } else if (type === 'error') {
                        messageElement.style.backgroundColor = '#721c24';
                        messageElement.style.color = '#f8d7da';
                        messageElement.style.border = '1px solid #dc3545';
                    } else if (type === 'warning') {
                        messageElement.style.backgroundColor = '#856404';
                        messageElement.style.color = '#fff3cd';
                        messageElement.style.border = '1px solid #ffc107';
                    } else {
                        messageElement.style.backgroundColor = '#084298';
                        messageElement.style.color = '#cfe2ff';
                        messageElement.style.border = '1px solid #0d6efd';
                    }
                } else {
                    // 浅色模式下的样式
                    if (type === 'success') {
                        messageElement.style.backgroundColor = '#d4edda';
                        messageElement.style.color = '#155724';
                        messageElement.style.border = '1px solid #c3e6cb';
                    } else if (type === 'error') {
                        messageElement.style.backgroundColor = '#f8d7da';
                        messageElement.style.color = '#721c24';
                        messageElement.style.border = '1px solid #f5c6cb';
                    } else if (type === 'warning') {
                        messageElement.style.backgroundColor = '#fff3cd';
                        messageElement.style.color = '#856404';
                        messageElement.style.border = '1px solid #ffeaa7';
                    } else {
                        messageElement.style.backgroundColor = '#cce7ff';
                        messageElement.style.color = '#004085';
                        messageElement.style.border = '1px solid #b8daff';
                    }
                }
                
                messageElement.innerHTML = `
                    <i class="bi ${type === 'success' ? 'bi-check-circle' : 'bi-exclamation-circle'}"></i>
                    <span>${message}</span>
                    <button class="btn-close" onclick="this.parentElement.remove()"></button>
                `;
                
                flashContainer.appendChild(messageElement);
                
                // 3秒后自动移除
                setTimeout(() => {
                    if (messageElement.parentElement) {
                        messageElement.remove();
                    }
                }, 3000);
            }
            
            // 文件删除后自动刷新
            document.querySelectorAll('.file-actions form').forEach(form => {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    const currentForm = this;
                    
                    showConfirm('确定要删除这个文件吗？', function(confirmResult) {
                        if (!confirmResult) return;
                        
                        const formData = new FormData(currentForm);
                        const data = Object.fromEntries(formData.entries());
                        
                        fetch(currentForm.action, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify(data)
                        })
                        .then(response => response.json())
                        .then(result => {
                            if (result.status === 'success') {
                                // 删除成功后刷新文件列表
                                location.reload();
                            } else {
                                showMessage(`删除失败: ${result.message}`, 'error');
                            }
                        })
                        .catch(error => {
                            console.error('删除失败:', error);
                            showMessage('删除失败，请重试', 'error');
                        });
                    });
                });
            });
            
            // 深色模式切换功能
            const themeToggle = document.getElementById('theme-toggle');
            const themeIcon = themeToggle.querySelector('i');
            
            // 检查本地存储或系统偏好
            const savedTheme = localStorage.getItem('theme') || 
                            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
            
            if (savedTheme === 'dark') {
                document.body.classList.add('dark-mode');
                themeIcon.className = 'bi bi-sun';
                themeToggle.innerHTML = '<i class="bi bi-sun"></i> 浅色模式';
            }
            
            // 切换主题
            themeToggle.addEventListener('click', function() {
                if (document.body.classList.contains('dark-mode')) {
                    document.body.classList.remove('dark-mode');
                    localStorage.setItem('theme', 'light');
                    themeIcon.className = 'bi bi-moon';
                    themeToggle.innerHTML = '<i class="bi bi-moon"></i> 深色模式';
                } else {
                    document.body.classList.add('dark-mode');
                    localStorage.setItem('theme', 'dark');
                    themeIcon.className = 'bi bi-sun';
                    themeToggle.innerHTML = '<i class="bi bi-sun"></i> 浅色模式';
                }
            });
            
            // 更新进度条颜色
            const progressBars = document.querySelectorAll('.space-fill');
            progressBars.forEach(bar => {
                const width = parseInt(bar.style.width);
                if (width < 70) {
                    bar.classList.add('low');
                } else if (width < 90) {
                    bar.classList.add('medium');
                } else {
                    bar.classList.add('high');
                }
            });
            
            // 自动更新配置文件
            document.getElementById('update-config-btn')?.addEventListener('click', function() {
                showConfirm('确定要自动更新配置文件吗？这将重新加载最新的配置信息。', function(confirmResult) {
                    if (!confirmResult) return;
                    
                    fetch('/api/update_config_auto', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Admin-Token': localStorage.getItem('admin_token')
                        }
                    })
                    .then(response => {
                        if (response.ok) {
                            showMessage('配置文件更新成功！', 'success');
                            setTimeout(() => {
                                location.reload();
                            }, 1000);
                        } else {
                            showMessage('配置文件更新失败，请重试', 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showMessage('网络错误，请重试', 'error');
                    });
                });
            });
            
            // 一键重启服务
            document.getElementById('restart-server-btn')?.addEventListener('click', function() {
                showConfirm('确定要重启服务吗？这将导致服务短暂中断。', function(confirmResult) {
                    if (!confirmResult) return;
                    
                    fetch('/api/restart_server', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Admin-Token': localStorage.getItem('admin_token')
                        }
                    })
                    .then(response => {
                        if (response.ok) {
                            showMessage('服务正在重启，请等待片刻后刷新页面...', 'success');
                            // 服务重启后可能需要等待一段时间再刷新
                            setTimeout(() => {
                                location.reload();
                            }, 5000);
                        } else {
                            showMessage('服务重启失败，请重试', 'error');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showMessage('网络错误，请重试', 'error');
                    });
                });
            });
            
            // 查看系统日志
            document.getElementById('view-system-log-btn')?.addEventListener('click', function() {
                // 创建日志类型选择器
                const logTypeSelector = document.createElement('div');
                logTypeSelector.innerHTML = `
                    <div style="margin-bottom: 10px;">
                        <label for="log-type" style="margin-right: 10px;">日志类型：</label>
                        <select id="log-type" style="padding: 5px;">
                            <option value="system">系统日志</option>
                            <option value="api">API日志</option>
                            <option value="user">用户日志</option>
        
                        </select>
                        <label for="log-days" style="margin-left: 20px; margin-right: 10px;">查看天数：</label>
                        <select id="log-days" style="padding: 5px;">
                            <option value="1">1天</option>
                            <option value="3">3天</option>
                            <option value="7">7天</option>
                        </select>
                        <button id="load-log-btn" style="padding: 5px 15px; margin-left: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">查看日志</button>
                    </div>
                    <div id="log-content" style="max-height: 60vh; overflow-y: auto;">请选择日志类型并点击查看</div>
                `;
                
                showModal('系统日志', logTypeSelector);
                
                // 添加查看按钮点击事件
                document.getElementById('load-log-btn').addEventListener('click', function() {
                    const logType = document.getElementById('log-type').value;
                    const logDays = document.getElementById('log-days').value;
                    
                    // 显示加载状态
                    document.getElementById('log-content').textContent = '正在加载日志...';
                    
                    fetch(`/api/system_log?type=${logType}&days=${logDays}`, {
                        method: 'GET',
                        headers: {
                            'X-Admin-Token': localStorage.getItem('admin_token')
                        }
                    })
                    .then(response => response.text())
                    .then(log => {
                        // 使用pre标签显示日志，但不设置特殊的字体颜色
                        document.getElementById('log-content').innerHTML = `<pre style="max-height: 60vh; overflow-y: auto; white-space: pre-wrap; word-wrap: break-word;">${log}</pre>`;
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        document.getElementById('log-content').innerHTML = `<span style="color: red;">获取日志失败，请重试</span>`;
                    });
                });
            });
            

            
            // 全局变量
            let logRefreshInterval = null;
            let logLines = [];
            const MAX_LOG_LINES = 500;
            

            

            


            

            

            

            

            
            // 辅助函数：格式化流量显示
            function formatTraffic(bytes) {
                if (bytes === 0) return '0 B';
                const k = 1024;
                const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }
            
            // 辅助函数：格式化日期显示
            function formatDate(dateString) {
                try {
                    const date = new Date(dateString);
                    return date.toLocaleString('zh-CN');
                } catch (e) {
                    return dateString;
                }
            }
        });
        
        // 模态窗口功能
        function showModal(title, content, type = 'text') {
            const modal = document.getElementById('modal-window');
            const modalTitle = document.getElementById('modal-title');
            const modalContent = document.getElementById('modal-content');
            const modalClose = document.getElementById('modal-close');
            
            // 设置模态窗口内容
            modalTitle.textContent = title;
            
            if (type === 'text') {
                modalContent.innerHTML = '<pre>' + content + '</pre>';
                modalContent.style.whiteSpace = 'pre-wrap';
            } else if (type === 'html') {
                modalContent.innerHTML = content;
                modalContent.style.whiteSpace = '';
            }
            
            // 显示模态窗口
            modal.style.display = 'block';
            
            // 点击关闭按钮或模态窗口外部关闭
            modalClose.onclick = function() {
                modal.style.display = 'none';
            }
            
            window.onclick = function(event) {
                if (event.target === modal) {
                    modal.style.display = 'none';
                }
            }
        }
        
        // 确认对话框
        function showConfirm(message, callback) {
            const confirmModal = document.getElementById('confirm-modal');
            const confirmMessage = document.getElementById('confirm-message');
            const confirmYes = document.getElementById('confirm-yes');
            const confirmNo = document.getElementById('confirm-no');
            
            confirmMessage.textContent = message;
            confirmModal.style.display = 'block';
            
            // 移除之前的事件监听器
            const newYes = confirmYes.cloneNode(true);
            confirmYes.parentNode.replaceChild(newYes, confirmYes);
            
            const newNo = confirmNo.cloneNode(true);
            confirmNo.parentNode.replaceChild(newNo, confirmNo);
            
            // 添加新的事件监听器
            newYes.onclick = function() {
                confirmModal.style.display = 'none';
                if (callback) callback(true);
            }
            
            newNo.onclick = function() {
                confirmModal.style.display = 'none';
                if (callback) callback(false);
            }
        }
        
        // 替换查看系统日志的window.open调用
        document.getElementById('view-system-log-btn')?.addEventListener('click', function() {
            fetch('/api/system_log', {
                method: 'GET',
                headers: {
                    'X-Admin-Token': localStorage.getItem('admin_token')
                }
            })
            .then(response => response.text())
            .then(log => {
                showModal('系统日志', log);
            })
            .catch(error => {
                console.error('Error:', error);
                showMessage('获取日志失败，请重试', 'error');
            });
        });
        
        // 替换所有alert调用为showMessage
        window.alert = function(message) {
            showMessage(message, 'info');
        };
        
        // 替换所有confirm调用为showConfirm
        window.confirm = function(message) {
            // 注意：这是一个同步函数，而showConfirm是异步的
            // 在现代浏览器中，这种同步阻塞已不推荐使用
            // 但为了兼容性，我们这里简单实现
            let result = false;
            const modal = document.createElement('div');
            modal.style.position = 'fixed';
            modal.style.top = '0';
            modal.style.left = '0';
            modal.style.width = '100%';
            modal.style.height = '100%';
            modal.style.backgroundColor = 'rgba(0,0,0,0.5)';
            modal.style.zIndex = '9999';
            modal.style.display = 'flex';
            modal.style.justifyContent = 'center';
            modal.style.alignItems = 'center';
            modal.style.fontFamily = 'sans-serif';
            
            const dialog = document.createElement('div');
            dialog.style.backgroundColor = '#fff';
            dialog.style.padding = '20px';
            dialog.style.borderRadius = '5px';
            dialog.style.minWidth = '300px';
            dialog.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
            
            const messageEl = document.createElement('p');
            messageEl.textContent = message;
            messageEl.style.marginBottom = '15px';
            
            const buttons = document.createElement('div');
            buttons.style.display = 'flex';
            buttons.style.justifyContent = 'flex-end';
            buttons.style.gap = '10px';
            
            const noBtn = document.createElement('button');
            noBtn.textContent = '取消';
            noBtn.style.padding = '5px 15px';
            noBtn.style.border = '1px solid #ccc';
            noBtn.style.borderRadius = '3px';
            noBtn.style.backgroundColor = '#fff';
            noBtn.style.cursor = 'pointer';
            noBtn.onclick = function() {
                document.body.removeChild(modal);
                result = false;
                // 使用同步方式处理
                window.confirmResult = result;
            };
            
            const yesBtn = document.createElement('button');
            yesBtn.textContent = '确定';
            yesBtn.style.padding = '5px 15px';
            yesBtn.style.border = '1px solid #ccc';
            yesBtn.style.borderRadius = '3px';
            yesBtn.style.backgroundColor = '#f0f0f0';
            yesBtn.style.cursor = 'pointer';
            yesBtn.onclick = function() {
                document.body.removeChild(modal);
                result = true;
                // 使用同步方式处理
                window.confirmResult = result;
            };
            
            buttons.appendChild(yesBtn);
            buttons.appendChild(noBtn);
            dialog.appendChild(messageEl);
            dialog.appendChild(buttons);
            modal.appendChild(dialog);
            document.body.appendChild(modal);
            
            // 等待用户点击
            // 这是一个简单的实现，在实际应用中可能需要更复杂的处理
            while (modal.parentNode) {
                // 这里会阻塞主线程，不推荐使用
                // 但为了兼容性，我们暂时这样实现
            }
            
            return result;
        };
    </script>
    
    <!-- 模态窗口HTML结构 -->
    <div id="modal-window" class="modal" style="display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);">
        <div class="modal-content-wrapper" style="background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 800px; max-height: 80vh; overflow-y: auto; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px;">
                <h2 id="modal-title" style="margin: 0; font-size: 1.2em; color: #333;"></h2>
                <button id="modal-close" style="background: none; border: none; font-size: 1.5em; cursor: pointer; color: #aaa; hover:color: #000;">×</button>
            </div>
            <div id="modal-content" style="font-family: monospace; font-size: 0.9em; line-height: 1.4;"></div>
        </div>
    </div>
    
    <!-- 确认对话框HTML结构 -->
    <div id="confirm-modal" class="confirm-modal" style="display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);">
        <div class="confirm-content-wrapper" style="background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 300px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);">
            <p id="confirm-message" style="margin-bottom: 20px;"></p>
            <div style="display: flex; justify-content: flex-end; gap: 10px;">
                <button id="confirm-yes" style="padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">确定</button>
                <button id="confirm-no" style="padding: 8px 16px; background-color: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer;">取消</button>
            </div>
        </div>
    </div>
    
    <style>
        /* 深色模式下的弹窗样式 */
        [data-theme="dark"] .modal-content-wrapper {
            background-color: var(--dark-card);
            color: var(--dark-text);
            border-color: var(--dark-border);
        }
        
        [data-theme="dark"] .modal-content-wrapper h2 {
            color: var(--dark-text);
        }
        
        [data-theme="dark"] .confirm-content-wrapper {
            background-color: var(--dark-card);
            color: var(--dark-text);
            border-color: var(--dark-border);
        }
        
        [data-theme="dark"] #confirm-no {
            background-color: var(--dark-border);
        }
    </style>
            </div>
        </main>
    
    <!-- 深色模式切换脚本 -->
    <script>
        // 深色模式切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const themeToggle = document.getElementById('theme-toggle');
            
            // 检查本地存储或系统偏好
            const savedTheme = localStorage.getItem('theme') || 
                            (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
            
            if (savedTheme === 'dark') {
                document.documentElement.setAttribute('data-theme', 'dark');
                themeToggle.innerHTML = '<i class="bi bi-sun"></i> 浅色模式';
            } else {
                document.documentElement.removeAttribute('data-theme');
                themeToggle.innerHTML = '<i class="bi bi-moon"></i> 深色模式';
            }
            
            // 切换主题
            themeToggle.addEventListener('click', function() {
                const currentTheme = document.documentElement.getAttribute('data-theme');
                if (currentTheme === 'dark') {
                    document.documentElement.removeAttribute('data-theme');
                    localStorage.setItem('theme', 'light');
                    themeToggle.innerHTML = '<i class="bi bi-moon"></i> 深色模式';
                } else {
                    document.documentElement.setAttribute('data-theme', 'dark');
                    localStorage.setItem('theme', 'dark');
                    themeToggle.innerHTML = '<i class="bi bi-sun"></i> 浅色模式';
                }
            });
        });
    </script>
    
    <!-- 左下角深色模式切换控件样式 -->
    <style>
        .bottom-left-controls {
            position: fixed;
            bottom: 15px;
            left: 15px;
            z-index: 1000;
        }
        
        .bottom-left-controls button {
            padding: 8px 12px;
            border-radius: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
        
        .bottom-left-controls button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        /* 深色模式下的按钮样式 */
        [data-theme="dark"] .bottom-left-controls button {
            background-color: var(--dark-card);
            color: var(--dark-text);
            border-color: var(--dark-border);
        }
        
        [data-theme="dark"] .bottom-left-controls button:hover {
            background-color: #334155;
        }
    </style>
</body>
</html>